
<%@ include file="../common/top.jsp"%>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/cart.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://kit.fontawesome.com/7d3f51abf0.js" crossorigin="anonymous"></script>
    <title>Document</title>




<div class="crumb">
    <div class="w">
        <div class="crumb-content">
            <a href="#" class="link">MyPetStore</a>
            <span>></span>
            <span class="link-text">Cart</span>
            <span id="BackLink" class="Backlink"><stripes:link beanclass="org.mybatis.jpetstore.web.actions.CatalogActionBean">
                Return to Main Menu</stripes:link></span>
        </div>

    </div>
</div>
<div id="Catalog">

    <div id="Cart">

        <div class="page-wrap w">
            <div class="panel">
                <h2><i class="fa-solid fa-cart-shopping">Shopping Cart</i></h2>
                <div class="panel-title"></div>
                <div class="panel-body">
                    <form action="deleteSeleted" id="updatecart" method="post" >
                        <table class="product-top-table">
                            <tr>
                                <th class="cell-img">Images</th>
                                <th class="cell-itemid">Item ID</th>
                                <th class="cell-productid">Product ID</th>
                                <th class="cell-desp">Description</th>
                                <th class="cell-stock">In Stock?</th>
                                <th class="cell-quantity">Quantity</th>
                                <th class="cell-listprice">List Price</th>
                                <th class="cell-totalprice">Total Cost</th>
                                <td class="cell-remove">Operation</td>
                            </tr>
                        </table>

                        <c:if test="${sessionScope.cart.numberOfItems == 0}">
                            <div class="empty">Your cart is empty.</div>
                        </c:if>

                        <table class="product-table" id="product-table">
                            <c:forEach var="cartItem" items="${sessionScope.cart.cartItems}">
                            <tr>
                                <td class="cell-img">
                                    <div class="checkbox">
                                        <input type="checkbox" class="checkboxes">
                                        <a href="itemForm?itemId=${cartItem.item.itemId}" >
                                            ${cartItem.item.product.description.substring(0,cartItem.item.product.description.indexOf(">"))} class="product-img">
                                        </a>
                                    </div>

                                </td>
                                <td class="cell-itemid">
                                    <a href="itemForm?itemId=${cartItem.item.itemId}" class="link">${cartItem.item.itemId}</a>
                                </td>
                                <td class="cell-productid">${cartItem.item.product.productId}</td>
                                <td class="cell-desp">${cartItem.item.attribute1} ${cartItem.item.attribute2}
                                    ${cartItem.item.attribute3} ${cartItem.item.attribute4}
                                    ${cartItem.item.attribute5} ${cartItem.item.product.name}</td>
                                <td class="cell-stock">${cartItem.inStock}</td>
                                <td class="cell-quantity">
                                    <span><button type="button" id="sub" class="cell-quantity-button">-</button></span>
                                    <span>&nbsp;</span>
                                    <span><input id="input" type="text" class="cell-quantity-input" name="${cartItem.item.itemId}" value="${cartItem.quantity}"></span>
                                    <span>&nbsp;</span>
                                    <span><button type="button" id="add" class="cell-quantity-btn">+</button></span>
                                </td>
                                <td  class="cell-listprice"><fmt:formatNumber value="${cartItem.item.listPrice}"
                                                                             pattern="$#,##0.00" /></td>
                                <td id="${cartItem.item.itemId}" class="cell-totalprice"><fmt:formatNumber value="${cartItem.total}"
                                                                              pattern="$#,##0.00" /></td>
                                <td class="cell-remove">
                                    <a href="removeCartItem?workingItemId=${cartItem.item.itemId}" class="cell-removeButton">Remove</a>
                                </td>
                            </tr>
                            </c:forEach>
                        </table>
                        <table class="submit-content">

                            <tr>
                                <th class="nbs">&nbsp;</th>
                                <c:if test="${sessionScope.cart.numberOfItems > 0}">
                                <th class="sub-content-left">
                                    <a href="#" class="fa-regular fa-trash-can"></a>
                                    <input type="submit" class="delete" value="Delete Seleted">
                                </th>
                                <th class="nbsp">&nbsp;</th>

                                    <th class="subtotal">Sub Total:</th>
                                    <th id="total-price" class="total-price"><fmt:formatNumber value="${sessionScope.addCart.subTotal}" pattern="$#,##0.00" /></th>
                                    <th>
                                        <a href="newOrderForm" class="btn order-submit">Checkout</a>
                                    </th>
                                </c:if>
                            </tr>

                        </table>
                        <div id="MyList">
                            <c:if test="${sessionScope.loginAccount != null}">
                            <c:if test="${!empty sessionScope.loginAccount.listOption}">
                                <%@ include file="includeMyList.jsp"%>
                            </c:if>
                            </c:if>
                        </div>
                    </form>
                </div>
            </div>
        </div>




        <div id="Separator">&nbsp;</div>
    </div>
</div>

<script src="js/cart.js"></script>
<%@ include file="../common/bottom.jsp"%>